<template>
    <div>
        <el-dialog
            :title="isAdd ? '添加商品分类' : '编辑商品分类'"
            :visible.sync="isShow"
            center
            :show-close="false"
        >
            <el-form
                :model="cateform"
                :rules="rules"
                label-position="right"
                label-width="100px"
                ref="cateform"
            >
                <el-form-item label="上级分类" prop="pid">
                    <el-select
                        v-model="cateform.pid"
                        placeholder="请选择上级分类"
                    >
                    <el-option label="顶级分类" :value="0"></el-option>
                        <el-option
                            v-for="item in catelist"
                            :key="item.id"
                            :label="item.catename"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" prop="catename">
                    <el-input v-model="cateform.catename"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="img">
                    <el-upload
                        action="#"
                        list-type="picture-card"
                        :on-change="handleChange"
                        :on-remove="handleRemove"
                        :auto-upload="false"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch
                        v-model="cateform.status"
                        active-color="#13ce66"
                        ref="upload"
                        :active-value="1"
                        :inactive-value="2"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit" v-if="isAdd"
                    >添 加</el-button
                >
                <el-button type="primary" @click="submit" v-else
                    >修 改</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Vuex from "vuex";
export default {
    data() {
        return {
            //表单的验证规则
            rules: {
                catename: [
                    {
                        required: true,
                        message: "请输入商品名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 6,
                        message: "长度在 2 到 6 个字符",
                        trigger: "blur",
                    },
                ],
                pid: {
                    required: true,
                    message: "请输入上级分类",
                    trigger: "blur",
                },
            },
        };
    },
    props: ["isDialog", "isAdd"],
    methods: {
        //文件状态改变时
        handleChange(file){
            this.cateform.img = file.raw
        },
        //文件删除时的钩子函数
        handleRemove() {
            //使得编辑的时候删除可以成功，这里的cartform改变，但是数据库内容没变，取消不影响
            this.cateform.img = '',
            // this.setfileList([])
            this.$message.success('删除成功')
        },
        //文件上传超出限制的钩子
        handleExceed(){
            this.$message.warning('文件允许上传一张图片')
        },
        ...Vuex.mapMutations({
            //设置一条数据 也就是设置弹框的数据
            setcateinfo: "cate/setcateinfo",
            setfileList: "cate/setfileList",
        }),
        ...Vuex.mapActions({
            getlist: "cate/catelist_a", //获取商品列表 接口
            cateadd: "cate/cateadd_a", //获取商品添加 接口
            cateedit: "cate/cateedit_a", //获取商品添加 接口
        }),
        //点击取消 弹框消失
        cancel() {
            this.$emit("cancel", false);
            this.reset();
        },
        //reset 重置弹框表单的数据
        reset() {
            this.setcateinfo({
                catename: "",
                img: "",
                pid: "",
                status: 1,
            });
            //重置也要把fileList也就是upload关联的文件内容变为空
            this.setfileList([])
        },
        //点击添加或修改按钮提交
        submit() {
            //通过验证器判断是否符合rules规则
            this.$refs.cateform.validate((vaild) => {
                if (vaild) {
                    let fd = new FormData()
                    for(var key in this.cateform){
                        fd.append(key,this.cateform[key])
                    }
                    //vuex方法,需要去watch监听事件的变化
                    if (this.isAdd) {
                        this.cateadd(fd);
                    } else {
                        this.cateedit(fd);
                    }
                } else {
                    this.$message.error("输入有误");
                    this.reset();
                    return false;
                }
            });
        },
    },
    computed: {
        //获取商品列表
        ...Vuex.mapGetters({
            catelist: "cate/getcatelist",
            cateform: "cate/getcateinfo",
            cateTitle: "cate/getcateTitle",
            fileList:"cate/getfileList",//文件上传的历史记录
        }),
        //接收传递来的prop属性，
        isShow: {
            get() {
                return this.isDialog;
            },
            set() {
                this.$emit("cancel", false);
            },
        },
    },
    watch: {
        //监听输出的内容是否变化，list组件也会受影响
        cateTitle(val) {
            if (val.code == 200) {
                this.$message.success(val.msg);
                this.cancel();
            } else {
                this.$message.error(val.msg);
                this.reset();
            }
            this.getlist();
        },
    },
    mounted() {
        //获取树状 商品列表
        this.getlist();
    },
};
</script>

<style scoped></style>
